<!-- 修改后的 index.html 页面 -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>膳食库数据查询</title>
    <meta charset="UTF-8">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }

        h1 {
            color: #333;
            text-align: center;
        }

        form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #666;
        }

        input[type="text"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button[type="submit"] {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #333;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        div {
            margin-top: 20px;
        }

        h2 {
            color: #333;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            color: #666;
            height: 1px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }
        .action-buttons {
            display: flex;
            justify-content: space-around;
        }

        .topform {
            display: flex;
            flex-direction:row;
            justify-content: space-around;
        }

        .t1{
            display: flex;
            flex-direction: column;
            justify-content: center;

        }

        .t2 input,.t1 input{
            margin: 1% auto;
            width:87%;
        }
        button:hover{
            color: red;
        }
        button{
            margin-top: 20px;
        }
        .t1 form{
            width: 200px;
        }
    </style>
</head>

<body>
<h1>膳食库数据操作</h1>
<div class="topform">
    <div class="t1">
        <form action="/searchadmin/Dietary" method="post">
            <label for="Code">请输入食物编号进行查询:</label>
            <input type="text" id="Code" name="Code" formaction="Code" placeholder="食物编号(例如:001)" required />
            <button type="submit"><b>查&nbsp;&nbsp;&nbsp;询</b></button>
        </form>
        <form action="/manage_dietaries" method="get">
            <button type="submit"><b>显&nbsp;&nbsp;&nbsp;示&nbsp;&nbsp;&nbsp;全&nbsp;&nbsp;&nbsp;部</b></button>
        </form>
    </div>
    <div class="t2">
        <form action="/add/Dietary" method="post" >
            <input type="text" name="Code" placeholder="食物编号" required />
            <input type="text" name="FoodName" placeholder="食物名" required />
            <input type="text" name="Type" placeholder="种类" required />
            <input type="text" name="EnergyPer100g" placeholder="每一百克的能量" required />
            <input type="text" name="ProteinContent" placeholder="蛋白质含量" required />
            <input type="text" name="FatContent" placeholder="脂肪含量" required />
            <input type="text" name="SuggestedGroup" placeholder="建议人群" required />
            <input type="text" name="Remarks" placeholder="注意事项" required />
            <button type="submit"><b>添&nbsp;&nbsp;&nbsp;加</b></button>
        </form>
    </div>
</div>
<table>
    <tr>
        <th>食物编号</th>
        <th>食品名称</th>
        <th>所属类型</th>
        <th>100g含能量</th>
        <th>蛋白质含量</th>
        <th>脂肪含量</th>
        <th>建议人群</th>
        <th>备注</th>
        <th>操作</th>
    </tr>
    <div th:if="${results}">
        <ul>
            <li th:each="result : ${results}">
                <tr>
                    <!--/*@thymesVar id="result" type="com.linfnn.*"*/-->
                    <td th:text="${result.Code}"></td>
                    <td th:text="${result.FoodName}"></td>
                    <td th:text="${result.Type}"></td>
                    <td th:text="${result.EnergyPer100g}"></td>
                    <td th:text="${result.ProteinContent}"></td>
                    <td th:text="${result.FatContent}"></td>
                    <td th:text="${result.SuggestedGroup}"></td>
                    <td th:text="${result.Remarks}"></td>
                    <td class="action-buttons">
                        <!-- 发送请求到后端，这个需要是主键即可 -->
                        <form action="/delete/Dietary" method="post" >
                            <input type="hidden" name="Code" th:value="*{result.Code}"/>
                            <button type="submit">删除</button>
                        </form>
                        <!-- 发送请求到后端，这个需要是主键即可 -->
                        <form action="/updatehtml/Dietary" method="post" >
                            <input type="hidden" name="Code" th:value="*{result.Code}"/>
                            <button type="submit">修改</button>
                        </form>
                    </td>
                </tr>
            </li>
        </ul>
    </div>
</table>
<div th:if="${results == null}">
    <h1>结果为空</h1>
</div>
</body>

</html>
